<script setup>
import { ref, getCurrentInstance, reactive, computed, onMounted, watch } from 'vue'
import * as echarts from "echarts";
import api from "@/api";
import _ from "lodash";
import SafeScoreDetail from "./SafeScoreDetail.vue";
import ProcessScoreDetail from "./ProcessScoreDetail.vue";
import EnvironmentScoreDetail from "./EnvironmentScoreDetail.vue";
import PdfLoader from "@/utils/html2pdf"
const { proxy } = getCurrentInstance();

const props = defineProps({
    currentReportType: "",
    currentDate: "",
    reportId: '',
});

//模块显示选择
const defaultProps = {
    children: 'children',
    label: 'label',
}
//安全树形
const safeTree = reactive([
    {
        id: 'sm',
        label: '安全模块',
        children: [
            {
                id: 's1',
                label: '本周指数趋势'
            },
            {
                id: 's2',
                label: '本周事件发生数'
            },
            {
                id: 's3',
                label: '本周摄像头事件'
            }
        ]
    }
]);
const safeShow = reactive({
    s1Show: true,
    s2Show: true,
    s3Show: true,
});
const isSafeNeedExpand = computed(() => {
    let arr = [];
    arr.push(safeShow.s1Show);
    arr.push(safeShow.s2Show);
    arr.push(safeShow.s3Show);
    return _.compact(arr).length > 1
});
const isSafeExpand = ref(false);


//进度树形
const progressTree = reactive([
    {
        id: 'pm',
        label: '进度模块',
        children: [
            {
                id: 'p1',
                label: '本周指数趋势'
            },
            {
                id: 'p2',
                label: '本周进度一栏'
            },
            {
                id: 'p3',
                label: '本周摄像头事件'
            }
        ]
    }
]);
const progressShow = reactive({
    p1Show: true,
    p2Show: true,
    p3Show: true
});

const isProgressExpand = ref(false);
//环境树形
const environmentTree = reactive([
    {
        id: 'em',
        label: '环境模块',
        children: [
            {
                id: 'e1',
                label: '本周指数趋势'
            },
            {
                id: 'e2',
                label: '本周进度一栏'
            },
            {
                id: 'e3',
                label: '本周摄像头事件'
            }
        ]
    }
]);
const environmentShow = reactive({
    e1Show: true,
    e2Show: true,
    e3Show: true
})
const isEnvironmentNeedExpand = computed(() => {
    let arr = [];
    arr.push(environmentShow.e1Show);
    arr.push(environmentShow.e2Show);
    arr.push(environmentShow.e3Show);
    return _.compact(arr).length > 1
});
const isEnvironmentExpand = ref(false);

//模块选择
//安全模块数据
let safeModuleData = reactive({
    score: 100,
    reason: '',
    reasonList: [],
    trendData: [85, 92, 73, 94, 87, 95, 51],
    trendType: 'line',
    accidentData: [
        { value: 1048, name: '事件1' },
        { value: 735, name: '事件2' },
        { value: 580, name: '事件3' },
        { value: 484, name: '事件4' },
        { value: 300, name: '事件5' }
    ],
    videoData: [25, 40, 35, 35, 40, 51, 32],
    videoType: 'bar'
});
//进度模块数据
let progressModuleData = reactive({
    score: 99,
    reason: '',
    reasonList: [],
    progressData: [85, 92, 73, 94, 87, 95, 51],
    progressType: 'line',
    tableData: [
        {
            buildingNum: '1#',
            f1: 0, f2: 0, f3: 2, f4: 0, f5: 1, f6: 0, f7: 0, f8: 0, f9: 3, f10: 3, f11: 3, f12: 3
        },
        {
            buildingNum: '2#',
            f1: 0, f2: 0, f3: 2, f4: 0, f5: 0, f6: 1, f7: 0, f8: 2, f9: 3, f10: 3, f11: 3, f12: 3
        },
        {
            buildingNum: '3#',
            f1: 0, f2: 0, f3: 2, f4: 1, f5: 1, f6: 2, f7: 0, f8: 4, f9: 3, f10: 3, f11: 3, f12: 3
        },
        {
            buildingNum: '4#',
            f1: 0, f2: 0, f3: 2, f4: 0, f5: 2, f6: 0, f7: 0, f8: 0, f9: 2, f10: 3, f11: 3, f12: 3
        },
        {
            buildingNum: '5#',
            f1: 0, f2: 0, f3: 2, f4: 0, f5: 1, f6: 0, f7: 1, f8: 0, f9: 1, f10: 3, f11: 3, f12: 3
        },
        {
            buildingNum: '6#',
            f1: 0, f2: 0, f3: 2, f4: 0, f5: 1, f6: 0, f7: 0, f8: 0, f9: 2, f10: 1, f11: 3, f12: 3
        },
    ],
    accidentData: [25, 40, 35, 35, 40, 51, 32],
    accidentType: 'bar'
});
//环境模块数据
let environmentModuleData = reactive({
    score: 100,
    reason: '',
    reasonList: [],
    trendData: [85, 92, 73, 94, 87, 95, 51],
    trendType: 'line',
    accidentData: [
        { value: 1048, name: '事件1' },
        { value: 735, name: '事件2' },
        { value: 580, name: '事件3' },
        { value: 484, name: '事件4' },
        { value: 300, name: '事件5' }
    ],
    videoData: [25, 40, 35, 35, 40, 51, 32],
    videoType: 'bar'
});

//事件趋势指数
function initSafeTrendChart(type) {
    let safeTrendDom = document.getElementById('safeTrendChart');
    let safeTrendChart = echarts.init(safeTrendDom);
    safeTrendChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: safeModuleData.trendData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#E7CFFC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#8DB6FB' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: safeModuleData.trendData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#E7CFFC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#8DB6FB' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && safeTrendChart.setOption(option);
}
function switchSafeTrendChart(type) {
    safeModuleData.trendType = type;
    initSafeTrendChart(type);
}

//事件发生数
function initSafeAccidentChart() {
    var chartDom = document.getElementById('safeAccidentChart');
    var myChart = echarts.init(chartDom);
    myChart.clear();
    var option;
    option = {
        color: ['#749FFA', '#83CFEF', '#EB7F67', '#F8C747', '#7585A2'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: '20%',
            left: '50%',
            itemWidth: 30,// 标志图形的长度
            itemHeight: 15,// 标志图形的宽度
            itemGap: 40,
        },
        series: [
            {
                name: '事件发生数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ["38%", "50%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                    normal: {
                        label: {
                            show: true,
                            position: "outside",
                            color: "#000",
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < safeModuleData.accidentData.length; i++) {
                                    total += safeModuleData.accidentData[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== "") {
                                    return (
                                        params.name + '\n' +
                                        percent +
                                        "%"
                                    );
                                } else {
                                    return "";
                                }
                            },
                        },
                        labelLine: {
                            length: 5,
                            length2: 15,
                            show: true,
                            color: "#000",
                        },
                    },
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: safeModuleData.accidentData
            }
        ]
    };
    option && myChart.setOption(option);
}

//摄像头事件
function initSafeVideoChart(type) {
    let safeVideoDom = document.getElementById('safeVideoChart');
    let safeVideoChart = echarts.init(safeVideoDom);
    safeVideoChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '件数',
                    data: safeModuleData.videoData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#E7CFFC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#8DB6FB' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '件数',
                    data: safeModuleData.videoData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#E7CFFC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#8DB6FB' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && safeVideoChart.setOption(option);
}

function switchSafeVideoChart(type) {
    safeModuleData.videoType = type;
    initSafeVideoChart(type);
}

//工地进度在本周指数
function initProgerssChart(type) {
    let progressDom = document.getElementById('progressChart');
    let progressChart = echarts.init(progressDom);
    progressChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: safeModuleData.trendData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#749FFA' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#3F7ED2' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: safeModuleData.trendData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#749FFA' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#3F7ED2' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && progressChart.setOption(option);
}
function switchProgressChart(type) {
    progressModuleData.progressType = type;
    initProgerssChart(type);
}

//进度本周一栏
function initProgressAccidentChart(type) {
    let progressAccidentDom = document.getElementById('progressAccidentChart');
    let progressAccidentChart = echarts.init(progressAccidentDom);
    progressAccidentChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '事件',
                    data: progressModuleData.accidentData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#CFE4FC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#89A3F8' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '事件',
                    data: progressModuleData.accidentData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#CFE4FC' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#89A3F8' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && progressAccidentChart.setOption(option);
}
function switchProgressAccidentChart(type) {
    progressModuleData.accidentType = type;
    initProgressAccidentChart(type);
}

//环境趋势指数
function initEnvironmentTrendChart(type) {
    let environmentTrendDom = document.getElementById('environmentTrendChart');
    let environmentTrendChart = echarts.init(environmentTrendDom);
    environmentTrendChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: environmentModuleData.trendData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#7CE4BE' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#3FC6D2' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：分',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '评分',
                    data: environmentModuleData.trendData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#7CE4BE' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#3FC6D2' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && environmentTrendChart.setOption(option);
}
function switchEnvironmentTrendChart(type) {
    environmentModuleData.trendType = type;
    initEnvironmentTrendChart(type);
}

//环境发生数
function initEnvironmentAccidentChart() {
    var chartDom = document.getElementById('environmentAccidentChart');
    var myChart = echarts.init(chartDom);
    myChart.clear();
    var option;
    option = {
        color: ['#749FFA', '#83CFEF', '#EB7F67', '#F8C747', '#7585A2'],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: '20%',
            left: '50%',
            itemWidth: 30,// 标志图形的长度
            itemHeight: 15,// 标志图形的宽度
            itemGap: 40,
        },
        series: [
            {
                name: '事件发生数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ["38%", "50%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                    normal: {
                        label: {
                            show: true,
                            position: "outside",
                            color: "#000",
                            formatter: function (params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < environmentModuleData.accidentData.length; i++) {
                                    total += environmentModuleData.accidentData[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== "") {
                                    return (
                                        params.name + '\n' +
                                        percent +
                                        "%"
                                    );
                                } else {
                                    return "";
                                }
                            },
                        },
                        labelLine: {
                            length: 5,
                            length2: 15,
                            show: true,
                            color: "#000",
                        },
                    },
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: environmentModuleData.accidentData
            }
        ]
    };
    option && myChart.setOption(option);
}

//环境摄像头事件
function initEnvironmentVideoChart(type) {
    let environmentVideoDom = document.getElementById('environmentVideoChart');
    let environmentVideoChart = echarts.init(environmentVideoDom);
    environmentVideoChart.clear();
    let option = null;
    if (type == 'bar') {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#939393 "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '件数',
                    data: environmentModuleData.videoData,
                    type: 'bar',
                    barWidth: 35,
                    // barGap:'90%'
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#CFFCF1' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#1EB8A4' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25
            },
            tooltip: {
                trigger: 'axis',
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br> 
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    interval: 0,
                    color: "#000"
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E "
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '单位：件',
                //nameRotate: '90',
                nameLocation: 'end',
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10]
                },
                axisTick: {
                    show: false//不显示坐标轴刻度线
                },
                axisLine: {
                    show: true,//不显示坐标轴线
                },
                splitLine: {     //网格线
                    "show": true
                }
            },
            series: [
                {
                    name: '件数',
                    data: environmentModuleData.videoData,
                    type: 'line',
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#CFFCF1' // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#1EB8A4' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                }
            ]
        };
    }
    option && environmentVideoChart.setOption(option);
}

function switchEnvironmentVideoChart(type) {
    environmentModuleData.videoType = type;
    initEnvironmentVideoChart(type);
}

function html2Pdf() {
    //保留各模块的高度
    let safeModuleHeight = document.getElementsByClassName('safeChart')[0].style.height;
    let progressModuleHeight = document.getElementsByClassName('progressChart')[0].style.height;
    let environmentModuleHeight = document.getElementsByClassName('environmentChart')[0].style.height;
    document.getElementsByClassName('safeChart')[0].style.height = 'unset';
    document.getElementsByClassName('progressChart')[0].style.height = 'unset';
    document.getElementsByClassName('environmentChart')[0].style.height = 'unset';

    document.getElementsByClassName('safeFooter')[0].style.opacity = 0;
    document.getElementsByClassName('progressFooter')[0].style.opacity = 0;
    document.getElementsByClassName('environmentFooter')[0].style.opacity = 0;

    document.getElementsByClassName('weekReportContainer')[0].scrollTop = 0;
    const weekReport = document.getElementsByClassName('weekReportContainer')[0];
    weekReport.style.position = 'absolute';
    weekReport.style.width = 'calc(100% - 253px)';
    weekReport.style.top = "0px";
    weekReport.style.left = '0px';
    const pdfDownLoader = new PdfLoader(weekReport, 'fileName', 'chartContent')  // fileName -->导出文件名,  question-table -->防止被截断的class名
    pdfDownLoader.outPutPdfFn(`${props.currentDate}${props.currentReportType}`);
    weekReport.style.position = "unset";
    weekReport.style.width = '100%';
    document.getElementsByClassName('safeChart')[0].style.height = safeModuleHeight;
    document.getElementsByClassName('progressChart')[0].style.height = progressModuleHeight;
    document.getElementsByClassName('environmentChart')[0].style.height = environmentModuleHeight;
    document.getElementsByClassName('safeFooter')[0].style.opacity = 1;
    document.getElementsByClassName('progressFooter')[0].style.opacity = 1;
    document.getElementsByClassName('environmentFooter')[0].style.opacity = 1;
}

//树形事件
function handleSafeCheck(self, all) {
    let selectedKeys = all.checkedKeys;
    let curId = self.id;
    switch (curId) {
        case 'sm':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                safeShow.s1Show = true;
                safeShow.s2Show = true;
                safeShow.s3Show = true;
            } else {
                safeShow.s1Show = false;
                safeShow.s2Show = false;
                safeShow.s3Show = false;
            }
            break;
        case 's1':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                safeShow.s1Show = true;
            } else {
                safeShow.s1Show = false;
            }
            break;
        case 's2':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                safeShow.s2Show = true;
            } else {
                safeShow.s2Show = false;
            }
            break;
        case 's3':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                safeShow.s3Show = true;
            } else {
                safeShow.s3Show = false;
            }
            break;
    }
    let arr = [];
    arr.push(safeShow.s1Show);
    arr.push(safeShow.s2Show);
    arr.push(safeShow.s3Show);
    isSafeExpand.value = !(_.compact(arr).length > 1)
    if (_.compact(arr).length == 0) {
        document.getElementsByClassName('safeChart')[0].style.height = '0px';
    } else {
        document.getElementsByClassName('safeChart')[0].style.height = '240px';
    }
}
function handleProgressCheck(self, all) {
    let selectedKeys = all.checkedKeys;
    let curId = self.id;
    switch (curId) {
        case 'pm':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                progressShow.p1Show = true;
                progressShow.p2Show = true;
                progressShow.p3Show = true;
            } else {
                progressShow.p1Show = false;
                progressShow.p2Show = false;
                progressShow.p3Show = false;
            }
            break;
        case 'p1':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                progressShow.p1Show = true;
            } else {
                progressShow.p1Show = false;
            }
            break;
        case 'p2':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                progressShow.p2Show = true;
            } else {
                progressShow.p2Show = false;
            }
            break;
        case 'p3':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                progressShow.p3Show = true;
            } else {
                progressShow.p3Show = false;
            }
            break;
    }
    let arr = [];
    arr.push(progressShow.p1Show);
    arr.push(progressShow.p2Show);
    arr.push(progressShow.p3Show);
    isProgressExpand.value = !(_.compact(arr).length > 1)
    if (_.compact(arr).length == 0) {
        document.getElementsByClassName('progressChart')[0].style.height = '0px';
    } else {
        document.getElementsByClassName('progressChart')[0].style.height = '240px';
    }
}
function handleEnvironmentCheck(self, all) {
    let selectedKeys = all.checkedKeys;
    let curId = self.id;
    switch (curId) {
        case 'em':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                environmentShow.e1Show = true;
                environmentShow.e2Show = true;
                environmentShow.e3Show = true;
            } else {
                environmentShow.e1Show = false;
                environmentShow.e2Show = false;
                environmentShow.e3Show = false;
            }
            break;
        case 'e1':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                environmentShow.e1Show = true;
            } else {
                environmentShow.e1Show = false;
            }
            break;
        case 'e2':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                environmentShow.e2Show = true;
            } else {
                environmentShow.e2Show = false;
            }
            break;
        case 'e3':
            if (_.indexOf(selectedKeys, curId) >= 0) {
                environmentShow.e3Show = true;
            } else {
                environmentShow.e3Show = false;
            }
            break;
    }
    let arr = [];
    arr.push(environmentShow.e1Show);
    arr.push(environmentShow.e2Show);
    arr.push(environmentShow.e3Show);
    isEnvironmentExpand.value = !(_.compact(arr).length > 1)
    if (_.compact(arr).length == 0) {
        document.getElementsByClassName('environmentChart')[0].style.height = '0px';
    } else {
        document.getElementsByClassName('environmentChart')[0].style.height = '240px';
    }
}

function handleDown(type) {
    switch (type) {
        case 'safe':
            let arr = [];
            arr.push(safeShow.s1Show);
            arr.push(safeShow.s2Show);
            arr.push(safeShow.s3Show);
            let length = _.compact(arr).length;
            if (length == 2) {
                document.getElementsByClassName('safeChart')[0].style.height = '470px';
            } else if (length == 3) {
                document.getElementsByClassName('safeChart')[0].style.height = '735px';
            }
            isSafeExpand.value = true;
            break;
        case 'progress':
            let arr1 = [];
            arr1.push(progressShow.p1Show);
            arr1.push(progressShow.p2Show);
            arr1.push(progressShow.p3Show);
            let length1 = _.compact(arr1).length;
            if (length1 == 2) {
                document.getElementsByClassName('progressChart')[0].style.height = '514px';
            } else {
                document.getElementsByClassName('progressChart')[0].style.height = '758px';
            }
            isProgressExpand.value = true;
            break;
        case 'environment':
            let arr2 = [];
            arr2.push(environmentShow.e1Show);
            arr2.push(environmentShow.e2Show);
            arr2.push(environmentShow.e3Show);
            let length2 = _.compact(arr2).length;
            if (length2 == 2) {
                document.getElementsByClassName('environmentChart')[0].style.height = '470px';
            } else {
                document.getElementsByClassName('environmentChart')[0].style.height = '735px';
            }
            isEnvironmentExpand.value = true;
            break;
    }
}

function handleUp(type) {
    switch (type) {
        case 'safe':
            document.getElementsByClassName('safeChart')[0].style.height = '240px';
            isSafeExpand.value = false;
            break;
        case 'progress':
            document.getElementsByClassName('progressChart')[0].style.height = '240px';
            isProgressExpand.value = false;
            break;
        case 'environment':
            document.getElementsByClassName('environmentChart')[0].style.height = '240px';
            isEnvironmentExpand.value = false;
            break;
    }
}

//根据ID获取设备名称
function getDeviceNameById(id) {
    let name = '';
    for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
        if (id === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
            name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
            break
        }
    }
    return name
}

function initWeekReport() {
    api.report.getReportById({
        reportId: props.reportId
    }).then(res => {
        let resData = res.data[0];
        //安全模块
        let safeData = resData.safetyReport;
        safeModuleData.score = safeData.mark;
        safeModuleData.trendData = safeData.scoreTrendList;
        console.log(safeModuleData.trendData);
        safeModuleData.videoData = safeData.dailyEventCountList;
        let safetyVideoData = []
        for (let i = 0; i < safeData.dailyEventCountList.length; i++) {
            safetyVideoData.push(safeData.dailyEventCountList[i].count)
        }
        safeModuleData.videoData = safetyVideoData
        console.log(safeModuleData.videoData)
        safeModuleData.accidentData = safeData.zoneEventCountList.map((item) => {
            let name = ""
            if (item.zone == 0) name = "识别区"
            else if (item.zone == 1) name = "危险区"
            else if (item.zone == 2) name = "作业面"
            else if (item.zone == 3) name = "火灾烟雾区"
            return {
                name: name,
                value: item.count
            }
        });
        console.log(safeModuleData.accidentData)
        //进度模块
        let progressData = resData.progressReport;
        progressModuleData.score = progressData.mark;
        progressModuleData.trendData = progressData.scoreTrendList

        //环境模块
        let leanData = resData.leanReport;
        environmentModuleData.score = leanData.mark;
        environmentModuleData.trendData = leanData.scoreTrendList
        environmentModuleData.videoData = leanData.dailyEventCountList
        let environmentVideoData = []
        for (let i = 0; i < leanData.dailyEventCountList.length; i++) {
            environmentVideoData.push(leanData.dailyEventCountList[i].count)
        }
        environmentModuleData.videoData = environmentVideoData
        environmentModuleData.accidentData = leanData.typeEventCountList.map((item) => {
            let name = ""
            if (item.type == "workingArea") name = "作业面"
            else if (item.type == "mainChannel") name = "主通道"
            else if (item.type == "material") name = "材料堆放区"
            else if (item.type == "rubbishDump") name = "垃圾堆场"
            return {
                name: name,
                value: item.count
            }
        })
        //安全
        //安全
        initSafeTrendChart('line');
        initSafeAccidentChart();
        initSafeVideoChart('bar');
        //进度
        initProgerssChart('line');
        initProgressAccidentChart('bar');
        //环境
        initEnvironmentTrendChart('line');
        initEnvironmentAccidentChart();
        initEnvironmentVideoChart('bar');
    })
}

onMounted(() => {
    initWeekReport();
});

watch(() => props.reportId,
    (newVal, oldVal) => {
        initWeekReport();
    })

</script>

<template>
    <div id="weekReport">
        <div class="weekReportContent">
            <div class="header">
                <span class="detail">{{ currentDate }}{{ currentReportType }}</span>
                <el-tree ref="safeTreeRef" :data="safeTree" show-checkbox node-key="id" highlight-current
                    :props="defaultProps" class="safeTree" :default-checked-keys="['s1', 's2', 's3']"
                    @check="handleSafeCheck" />
                <el-tree ref="progressTreeRef" :data="progressTree" show-checkbox node-key="id" highlight-current
                    :props="defaultProps" class="progressTree" :default-checked-keys="['p1', 'p2', 'p3']"
                    @check="handleProgressCheck" />
                <el-tree ref="environmentTreeRef" :data="environmentTree" show-checkbox node-key="id" highlight-current
                    :props="defaultProps" class="environmentTree" :default-checked-keys="['e1', 'e2', 'e3']"
                    @check="handleEnvironmentCheck" />
                <div class="exportBtn" @click="html2Pdf">导出 Pdf</div>
            </div>
            <div class="weekReportContainer">
                <div class="safeModule">
                    <div class="safeModuleItem">
                        <div class="title">
                            <span class="score">安全模块一周平均得分：
                                <el-tooltip placement="right-end" effect="light">
                                    <template #content>
                                        <SafeScoreDetail></SafeScoreDetail>
                                    </template>
                                    <img class="infoImg" src="@/assets/images/report/info.png" />
                                </el-tooltip>
                                <span class="colorText">{{ safeModuleData.score }}</span></span>
                        </div>
                        <div class="safeChart">
                            <div class="chartContent" v-show="safeShow.s1Show">
                                <div class="charttitle">
                                    <span class="titleName">安全本周指数趋势</span>
                                    <div class="fastChange">
                                        <div :class="[safeModuleData.trendType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchSafeTrendChart('bar')"></div>
                                        <div :class="[safeModuleData.trendType == 'line' ? 'active' : '', 'line']"
                                            @click="switchSafeTrendChart('line')"></div>
                                    </div>
                                </div>
                                <div id="safeTrendChart" class="chartEle"></div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="safeShow.s2Show">
                                <div class="charttitle">
                                    <span class="titleName">安全本周事件发生数</span>
                                </div>
                                <div id="safeAccidentChart" class="chartEle"></div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="safeShow.s3Show">
                                <div class="charttitle">
                                    <span class="titleName">安全本周摄像头事件</span>
                                    <div class="fastChange">
                                        <div :class="[safeModuleData.videoType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchSafeVideoChart('bar')"></div>
                                        <div :class="[safeModuleData.videoType == 'line' ? 'active' : '', 'line']"
                                            @click="switchSafeVideoChart('line')"></div>
                                    </div>
                                </div>
                                <div id="safeVideoChart" class="chartEle"></div>
                            </div>
                        </div>
                        <div class="footer safeFooter" v-if="isSafeNeedExpand">
                            <img v-if="isSafeExpand" src="@/assets/images/report/up.png" @click="handleUp('safe')" />
                            <img v-else src="@/assets/images/report/down.png" @click="handleDown('safe')" />

                        </div>
                    </div>
                </div>
                <div class="progressModule">
                    <div class="progressModuleItem">
                        <div class="title">
                            <span class="score">进度模块一周平均得分：
                                <el-tooltip placement="right-end" effect="light">
                                    <template #content>
                                        <!-- <scoreDetail></scoreDetail> -->
                                        <ProcessScoreDetail></ProcessScoreDetail>
                                    </template>
                                    <img class="infoImg" src="@/assets/images/report/info.png" />
                                </el-tooltip>
                                <span class="colorText">{{ progressModuleData.score
                                }}</span></span>
                        </div>
                        <div class="progressChart">
                            <div class="chartContent" v-show="progressShow.p1Show">
                                <div class="charttitle">
                                    <span class="titleName">工地进度本周指数</span>
                                    <div class="fastChange">
                                        <div :class="[progressModuleData.progressType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchProgressChart('bar')"></div>
                                        <div :class="[progressModuleData.progressType == 'line' ? 'active' : '', 'line']"
                                            @click="switchProgressChart('line')"></div>
                                    </div>
                                </div>
                                <div id="progressChart" class="chartEle"></div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="progressShow.p2Show">
                                <div class="charttitle">
                                    <span class="titleName">工地进度一栏</span>
                                </div>
                                <div class="progressTable chartEle">
                                    <el-table :data="progressModuleData.tableData" stripe style="width:100%"
                                        :header-cell-style="{ background: '#ECEDFF' }" height="240">
                                        <el-table-column prop="buildingNum" label="楼号" align="center" />
                                        <el-table-column prop="f1" label="1F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f1, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f2" label="2F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f2, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f3" label="3F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f3, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f4" label="4F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f4, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f5" label="5F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f5, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f6" label="6F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f6, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f7" label="7F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f7, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f8" label="8F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f8, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f9" label="9F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f9, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f10" label="10F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f10, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f11" label="11F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f11, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="f12" label="12F" align="center">
                                            <template #default="scope">
                                                <i :class="['progress' + scope.row.f12, 'colorSpan']"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="progressShow.p3Show">
                                <div class="charttitle">
                                    <span class="titleName">工地进度一栏</span>
                                    <div class="fastChange">
                                        <div :class="[progressModuleData.accidentType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchProgressAccidentChart('bar')"></div>
                                        <div :class="[progressModuleData.accidentType == 'line' ? 'active' : '', 'line']"
                                            @click="switchProgressAccidentChart('line')"></div>
                                    </div>
                                </div>
                                <div id="progressAccidentChart" class="chartEle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="environmentModule">
                    <div class="environmentModuleItem">
                        <div class="title">
                            <span class="score">环境模块一周平均得分：
                                <el-tooltip placement="right-end" effect="light">
                                    <template #content>
                                        <!-- <scoreDetail></scoreDetail> -->
                                        <EnvironmentScoreDetail></EnvironmentScoreDetail>
                                    </template>
                                    <img class="infoImg" src="@/assets/images/report/info.png" />
                                </el-tooltip>
                                <span class="colorText">{{ environmentModuleData.score
                                }}</span></span>
                        </div>
                        <div class="environmentChart">
                            <div class="chartContent" v-show="environmentShow.e1Show">
                                <div class="charttitle">
                                    <span class="titleName">环境本周指数趋势</span>
                                    <div class="fastChange">
                                        <div :class="[environmentModuleData.trendType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchEnvironmentTrendChart('bar')"></div>
                                        <div :class="[environmentModuleData.trendType == 'line' ? 'active' : '', 'line']"
                                            @click="switchEnvironmentTrendChart('line')"></div>
                                    </div>
                                </div>
                                <div id="environmentTrendChart" class="chartEle"></div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="environmentShow.e2Show">
                                <div class="charttitle">
                                    <span class="titleName">环境本周事件发生数</span>
                                </div>
                                <div id="environmentAccidentChart" class="chartEle"></div>
                            </div>
                            <div class="chartContent" style="margin-top: 5px;" v-show="environmentShow.e3Show">
                                <div class="charttitle">
                                    <span class="titleName">环境本周摄像头事件</span>
                                    <div class="fastChange">
                                        <div :class="[environmentModuleData.videoType == 'bar' ? 'active' : '', 'bar']"
                                            @click="switchEnvironmentVideoChart('bar')"></div>
                                        <div :class="[environmentModuleData.videoType == 'line' ? 'active' : '', 'line']"
                                            @click="switchEnvironmentVideoChart('line')"></div>
                                    </div>
                                </div>
                                <div id="environmentVideoChart" class="chartEle"></div>
                            </div>
                        </div>
                        <div class="footer environmentFooter" v-if="isEnvironmentNeedExpand">
                            <img v-if="isEnvironmentExpand" src="@/assets/images/report/up.png"
                                @click="handleUp('environment')" />
                            <img v-else src="@/assets/images/report/down.png" @click="handleDown('environment')" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#weekReport {
    width: 100%;
    height: 100%;

    .weekReportContent {
        .header {
            height: 30px;
            position: relative;

            .detail {
                display: inline-block;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 500;
                padding: 0 10px;
                margin: 0px 35px 0px 15px;
                background-color: #efeefe;
                border: 1px solid white;
                border-radius: 5px;
            }

            .exportBtn {
                display: inline-block;
                float: right;
                width: 66px;
                height: 30px;
                color: white;
                line-height: 30px;
                padding-left: 30px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("@/assets/images/report/export.png");
                cursor: pointer;
            }
        }

        .weekReportContainer {
            width: 100%;
            height: calc(100vh - 130px);
            overflow-y: auto;
            overflow-x: hidden;

            .safeModule {
                width: 100%;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #EEF3FD;
                box-shadow: 0px 0px 4px 0px #ECEEFC;
                border-radius: 6px;
                background-color: white;
            }

            .progressModule {
                width: 100%;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #EEF3FD;
                box-shadow: 0px 0px 4px 0px #ECEEFC;
                border-radius: 6px;
                background-color: white;
            }

            .environmentModule {
                width: 100%;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #EEF3FD;
                box-shadow: 0px 0px 4px 0px #ECEEFC;
                border-radius: 6px;
                background-color: white;
            }
        }
    }
}

.title {
    height: 50px;
    line-height: 40px;

    .titleName {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        margin-left: 10px;
        padding-left: 5px;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 600;
        border-left: 3px solid #8f93f7;
    }

    .score {
        padding-left: 15px;
    }

    .reason {
        padding-left: 25px;
    }
}

.infoImg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.colorText {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #8F93F7;
    padding-left: 10px;
}

#safeTrendChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#safeAccidentChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#safeVideoChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#progressChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#progressAccidentChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#environmentTrendChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#environmentAccidentChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

#environmentVideoChart {
    width: 1600px;
    width: 800px;
    width: 50%;
    height: 220px;
    margin: 0 auto;
}

.chartContent {
    position: relative;

    .charttitle {
        .titleName {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin-left: 10px;
            padding-left: 5px;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 600;
            border-left: 3px solid #8f93f7;
        }

        .fastChange {
            position: absolute;
            top: 0px;
            right: 35px;
            z-index: 99999;

            .bar {
                display: inline-block;
                width: 22px;
                height: 22px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("@/assets/images/report/zhu.png");
                cursor: pointer;

                &.active {
                    background-image: url("@/assets/images/report/zhuA.png");
                }
            }

            .line {
                display: inline-block;
                width: 22px;
                height: 22px;
                margin-left: 13px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("@/assets/images/report/zhe.png");
                cursor: pointer;

                &.active {
                    background-image: url("@/assets/images/report/zheA.png");
                }
            }
        }
    }

}

.colorSpan {
    display: inline-block;
    width: 30px;
    height: 15px;
    border-radius: 5px;
}

.progress0 {
    background-color: #80e7bf;
}

.progress1 {
    background-color: #fedb4c;
}

.progress2 {
    background-color: #f57861;
}

.progress3 {
    background-color: #e7eaed;
}

:deep(.el-tree) {
    display: inline-block;
    position: absolute;
}

.safeTree {
    left: 230px;
}

.progressTree {
    left: 400px;
}

.environmentTree {
    left: 570px;
}

.footer {
    text-align: center;

    img {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}

.safeChart {
    height: 240px;
    overflow: hidden;
}

.progressChart {
    height: 240px;
    overflow: hidden;
}

.environmentChart {
    height: 240px;
    overflow: hidden;
}
</style>